<template>
	<view
	    class="u-line-progress"
	    :style="[addStyle(customStyle)]"
	>
		<view
		    class="u-line-progress__background"
		    ref="u-line-progress__background"
		    :style="[{
				backgroundColor: inactiveColor,
				height: addUnit(height),
			}]"
		>
		</view>
		<view
		    class="u-line-progress__line"
		    :style="[progressStyle]"
		> 
			
		</view>
	</view>
</template>

<script>
	import { props } from './props';
	import { mpMixin } from 'uview-plus/libs/mixin/mpMixin';
	import { mixin } from 'uview-plus/libs/mixin/mixin';
	import { addUnit, addStyle, sleep, range } from 'uview-plus/libs/function/index';

	/**
	 * mprogress 线型进度条
	 * @description 展示操作或任务的当前进度，比如上传文件，是一个线形的进度条。
	 * @property {String}			activeColor		激活部分的颜色 ( 默认 '#19be6b' )
	 * @property {String}			inactiveColor	背景色 ( 默认 '#ececec' )
	 * @property {String | Number}	percentage		进度百分比，数值 ( 默认 0 )
	 * @property {String | Number}	height			进度条的高度，单位px ( 默认 12 )
	 * 
	 * @example <mprogress :percent="70"></mprogress>
	 */
	export default {
		name: "mprogress",
		mixins: [mpMixin, mixin, props],
		data() {
			return {
				lineWidth: 0,
			}
		},
		watch: {
			percentage(n) {
				this.resizeProgressWidth()
			}
		},
		computed: {
			progressStyle() { 
				let style = {}
				style.width = this.lineWidth
				style.backgroundColor = this.activeColor
				style.height = addUnit(this.height)
				return style
			},
			innserPercentage() {
				// 控制范围在0-100之间
				return range(0, 100, this.percentage)
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			addStyle,
			addUnit,
			init() {
				sleep(20).then(() => {
					this.resizeProgressWidth()
				})
			},
			getProgressWidth() {
				return this.$uGetRect('.u-line-progress__background')
			},
			resizeProgressWidth() {
				this.getProgressWidth().then(size => {
					const {
						width
					} = size
					// 通过设置的percentage值，计算其所占总长度的百分比
					this.lineWidth = width * this.innserPercentage / 100 + 'px'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.u-line-progress {
		align-items: stretch;
		position: relative;
		@include flex(row);
		flex: 1;
		overflow: hidden;
		border-radius: 100px;

		&__background {
			background-color: #a02b2b;
			border-radius: 100px;
			flex: 1;
		}

		&__line {
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			align-items: center;
			@include flex(row);
			color: #24cec5;
			border-radius: 100px;
			transition: width 0.5s ease;
			justify-content: flex-end;


            color:#21242d;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;

            background: linear-gradient(to right, #3494e6 50%, #ec6ead 100%);

		}


	}
</style>
